<template>
  <div style="padding-bottom: 30px">
    <div class="top add-lamp-row">
      <el-row>
        <el-col :span="4" style="margin-right: 2.5rem">
          <span class="label-span">{{ i18n.fy.类型 }}</span>
          <el-select style="width: 120px" v-model="typeOpt" class="m-2" placeholder="">
            <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-col>
        <!-- 批量新增网关-暂时不做 -->
        <!-- <el-col :span="5" v-if="typeOpt != 10">
          <span class="label-span">{{ i18n.fy.网关 }}</span>
          <el-select v-model="deviceGateway" class="m-2" :placeholder="i18n.fy.网关" :disabled="true">
            <el-option v-for="item in wmStore.gatewayList" :key="item.id" :label="item.nickName" :value="item.id" />
          </el-select>
        </el-col> -->
        <el-col :span="4" v-if="typeOpt != 10" style="margin-right: 2.5rem">
          <span class="label-span">{{ i18n.fy.区 }}</span>
          <el-select v-model="deviceArea" :placeholder="i18n.fy.请选择 + i18n.fy.区" @change="verifRepeat()">
            <el-option v-for="item in wmStore.deviceAreaList" :value="item.area_code">
              {{ item.area_code }}
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="8" v-if="typeOpt == 200 && typeOpt != 10" style="margin-right: 2.5rem">
          <span class="label-span">{{ i18n.fy.组 }}</span>
          <el-select :multiple="true" clearable filterable v-model="deviceGroup" :placeholder="i18n.fy.请选择 + i18n.fy.组"
            @change="verifRepeat()">
            <el-option v-for="item in wmStore.deviceGroupList" :value="item.group_name">
              {{ item.group_name }}
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="8" v-if="typeOpt == 100 && typeOpt != 10" style="margin-right: 2.5rem">
          <span class="label-span">{{ i18n.fy.号 }}</span>
          <el-select :multiple="true" clearable filterable v-model="deviceNumber" :placeholder="i18n.fy.请选择 + i18n.fy.号"
            @change="verifRepeat()">
            <el-option v-for="item in wmStore.deviceNumberList" :value="item.deviceIndex">
              {{ item.deviceIndex }}
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4" v-if="typeOpt == 300 && typeOpt != 10">
          <span>{{ i18n.fy.标签 }}</span>
          <el-input v-model="deviceTag" placeholder="" />
        </el-col>
      </el-row>
    </div>
    <el-table v-if="typeOpt == 10" :data="wmStore.deviceSetList" style="height: 400px" class="sceneTableData"
      @selection-change="handleSelectionChange3" ref="multipleSelection3Tab">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="areaCode" :label="i18n.fy.区" />
      <el-table-column prop="groupName" :label="i18n.fy.组"> </el-table-column>
      <el-table-column prop="deviceIndex" :label="i18n.fy.号"> </el-table-column>
      <el-table-column prop="ramk" :label="i18n.fy.备注"> </el-table-column>
      <el-table-column prop="pwd" :label="i18n.fy.网络密码" width="240">
        <template #default="scope">
          <el-input v-model="scope.row.pwd" :placeholder="i18n.fy.请输入 + i18n.fy.网络密码" />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
const props = defineProps({
  available: {
    type: Array,
    default: () => {
      return [];
    },
  },
});
import { i18nStore } from "@/pinia/i18n";
const i18n = i18nStore();
import { wirelessManageStore } from "@/pinia/wirelessManage";
const wmStore = wirelessManageStore();

let typeOpt = ref("");
let deviceArea = ref("");
let deviceGateway = ref("");
let deviceGroup = ref("");
let deviceNumber = ref("");
const addlampData = ref(null);
// let deviceTag = ref('')
// let multipleDevice = ref([])
let verifArrs = ref(["deviceArea"]);
let typeOptions = ref([
  { value: "400", label: "新增整区" },
  { value: "200", label: "新增整组" },
  { value: "100", label: "新增单号" },
  // { value: "300", label: '新增标签' },
  // { value: "10", label: '自定义新增' }
]);

// 计算属性
const availableData = computed(() => {
  let arr = [];
  props.available.forEach((element) => {
    arr.push(element.code + "-" + element.area + "-" + element.address);
  });
  return arr;
});

// const deviceGroup = computed(() => {
//   let arr = []
//   props.available.forEach(element => {
//     if (element.code === "200") {
//       arr.push(element.address)
//     }
//   });
//   return arr
// });

// 在组件挂载之前执行
onBeforeMount(() => {
  typeOpt.value = "400";
  deviceGateway.value = wmStore.treeGateway.gatewayId;
  // deviceArea.value = wmStore.deviceAreaList[0].area_code;
  // deviceGroup.value = wmStore.deviceGroupList[0].group_name;
  // deviceNumber.value = wmStore.deviceNumberList[0].deviceIndex;
});

const setAvailableData = (data) => {
  console.log("setAvailableData->", data);
};

const handleSelectionChange3 = (val) => {
  multipleDevice.value = val;
};

// 字段必填校验
const verificationRequ = () => {
  let isVer = true;
  let msg = "";
  let address = [];
  switch (typeOpt.value) {
    case "400":
      verifArrs.value = [deviceGateway, deviceArea];
      address = deviceArea.value;
      msg = "网关、区信息不能为空!";
      break;
    case "200":
      verifArrs.value = [deviceGateway, deviceArea, deviceGroup];
      address = deviceGroup.value;
      msg = "网关、区、组信息不能为空!";
      break;
    case "100":
      verifArrs.value = [deviceGateway, deviceArea, deviceNumber];
      address = deviceNumber.value;
      msg = "网关、区、号信息不能为空!";
      break;
    // case "300":
    //   verifArrs.value = ['deviceArea', 'deviceGateway', 'deviceTag']
    //   break;
    // case "10":
    //   verifArrs.value = ['multipleDevice']
    // break;
    default:
      break;
  }

  verifArrs.value.forEach((element) => {
    if (ref(element).value === "" || address === "" || ref(element).value.length === 0) {
      isVer = false;
      ElMessage.warning(msg);
    }
  });
  if (isVer) {
    addlampData.value = getAddLampData(address, typeOpt.value);
  }
  return isVer;
};

const verifRepeat = () => {
  let isRep = true;
  let msg = "";
  switch (typeOpt.value) {
    case "400":
      isRep = true;
      msg = `${deviceArea.value}区信息不能重复新增!`;
      let str = `${typeOpt.value}-${deviceArea.value}-${deviceArea.value}`;
      if (availableData.value.indexOf(str) !== -1) {
        deviceArea.value = "";
        isRep = false;
      }
      break;
    case "200":
      isRep = true;
      msg = `${deviceArea.value}区${deviceGroup.value[deviceGroup.value.length - 1]}组信息不能重复新增!`;
      let arr = [];
      deviceGroup.value.forEach((element) => {
        let str = `${typeOpt.value}-${deviceArea.value}-${element}`;
        if (availableData.value.indexOf(str) !== -1) {
          isRep = false;
        } else {
          arr.push(element);
        }
      });
      deviceGroup.value = arr;
      break;
    case "100":
      isRep = true;
      msg = `${deviceArea.value}区${deviceNumber.value[deviceNumber.value.length - 1]}号信息不能重复新增!`;
      let arr2 = [];
      deviceNumber.value.forEach((element) => {
        let str = `${typeOpt.value}-${deviceArea.value}-${element}`;
        if (availableData.value.indexOf(str) !== -1) {
          isRep = false;
        } else {
          arr2.push(element);
        }
      });
      deviceNumber.value = arr2;
      break;
    default:
      break;
  }
  if (!isRep) {
    ElMessage.warning(msg);
  }
  return isRep;
};

// 新增
const addLamp = () => {
  console.log("addLamp->", addlampData.value);
  if (addlampData.value) {
    wmStore.addLamp(addlampData.value);
  }
};

// 取消
const cancelAddLamp = () => {
  wmStore.addLampData = null;
  wmStore.addLampVisible = false;
};

const getAddLampData = (address, type) => {
  console.log("address->", address);
  let arr = [];
  if (type !== "400") {
    address.forEach((element) => {
      let data = {
        code: typeOpt.value,
        deviceName: deviceGateway.value,
        area: deviceArea.value,
        address: element,
        action: "callScene",
        params: '',
        identity: "",
      };
      arr.push(data);
    });
  } else {
    arr = [
      {
        code: typeOpt.value,
        deviceName: deviceGateway.value,
        area: deviceArea.value,
        address: address,
        action: "callScene",
        params: '',
        identity: "",
      },
    ];
  }
  console.log("getAddLampData->", arr);
  return arr;
};
defineExpose({ deviceArea, addlampData, deviceNumber, deviceGroup, setAvailableData, verificationRequ });
</script>

<style>
.label-span {
  font-size: 16px;
  color: #fff;
  line-height: 32px;
}

.add-lamp-row .el-row {
  display: flex;
  /* justify-content: space-between; */
}
</style>
